import React from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { Layout, UI, useThemeColors } from '@gaozh1024/rn-toolkit';

const ChipTestScreen: React.FC = () => {
  const colors = useThemeColors();

  const styles = StyleSheet.create({
    section: { marginBottom: 16 },
    row: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
    card: { borderRadius: 12, borderWidth: 1, borderColor: colors.border },
  });

  return (
    <Layout.Page
      headerShown
      headerProps={{ title: 'Chip 测试', backVisible: true }}
      padding={16}
      scrollable
      testID="ChipTestScreen"
    >
      {/* 基础样式：variant + selected */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>基础样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            variant: solid / outline；selected 控制选中样式（outline 未选中时为透明边框）
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip label="Outline 未选中" variant="outline" selected={false} testID="chip-basic-outline-inactive" />
            <UI.Chip label="Outline 选中" variant="outline" selected testID="chip-basic-outline-active" />
            <UI.Chip label="Solid 未选中" variant="solid" selected={false} testID="chip-basic-solid-inactive" />
            <UI.Chip label="Solid 选中" variant="solid" selected testID="chip-basic-solid-active" />
          </View>
        </Layout.Card>
      </View>

      {/* 尺寸：small / medium / large / 自定义数值 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>尺寸</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            size: small / medium / large / number（像素）
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip size="small" label="small" selected testID="chip-size-small" />
            <UI.Chip size="medium" label="medium" selected testID="chip-size-medium" />
            <UI.Chip size="large" label="large" selected testID="chip-size-large" />
            <UI.Chip size={36} label="36px" selected testID="chip-size-36" />
          </View>
        </Layout.Card>
      </View>

      {/* 颜色：主题预设 + 自定义 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>颜色</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            color: primary / secondary / success / warning / error / info / '#RRGGBB'
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip color="primary" label="primary" selected testID="chip-color-primary" />
            <UI.Chip color="secondary" label="secondary" selected testID="chip-color-secondary" />
            <UI.Chip color="success" label="success" selected testID="chip-color-success" />
            <UI.Chip color="warning" label="warning" selected testID="chip-color-warning" />
            <UI.Chip color="error" label="error" selected testID="chip-color-error" />
            <UI.Chip color="info" label="info" selected testID="chip-color-info" />
            <UI.Chip color="#8A2BE2" label="#8A2BE2" selected testID="chip-color-custom" />
          </View>
        </Layout.Card>
      </View>

      {/* 图标：ReactNode 与对象形式 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>图标</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            icon 支持 ReactNode 或对象形式：{`{ name, size, color, type }`}
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip
              label="节点图标"
              selected
              icon={<UI.Icon name="star" color="onSurface" />}
              testID="chip-icon-node"
            />
            <UI.Chip
              label="对象图标"
              selected
              icon={{ name: 'sparkles', color: '#fff', type: 'ionicons' }}
              testID="chip-icon-object"
            />
            <UI.Chip
              label="outline + icon"
              variant="outline"
              selected={false}
              icon={{ name: 'pricetag', color: colors.primary, type: 'ionicons' }}
              testID="chip-icon-outline"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 可关闭：closable（boolean）与自定义 closable 节点 */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>可关闭</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            closable=true 时显示关闭按钮（Pressable），也可传入自定义节点
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip
              label="Closable"
              selected
              closable
              onClose={() => Alert.alert('关闭事件', 'closable=true')}
              testID="chip-closable-true"
            />
            <UI.Chip
              label="自定义关闭"
              selected
              closable={<UI.Icon name="close-circle" color="#fff" />}
              testID="chip-closable-custom"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 文本样式：textStyle */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>文本样式</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            通过 textStyle 调整字体大小、粗细、颜色（注意与 variant/selected 的内容色处理）
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip
              label="粗体 + 放大 + 自定义色"
              selected
              textStyle={{ fontSize: 18, fontWeight: '700', color: '#FFE08A' }}
              testID="chip-text-style"
            />
            <UI.Chip
              label="outline + textStyle"
              variant="outline"
              selected={false}
              textStyle={{ fontSize: 14, fontWeight: '500', color: colors.primary }}
              testID="chip-text-style-outline"
            />
          </View>
        </Layout.Card>
      </View>

      {/* 间距：p/m/mh/mv/ph/pv（应用于 Chip 容器） */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>间距</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            支持通用 SpacingProps：p/m/mh/mv/ph/pv（示例用于可视化）
          </UI.Text>
          <View style={[styles.row, { borderWidth: 1, borderColor: colors.border, padding: 8 }]}>
            <UI.Chip label="m=12" m={12} selected testID="chip-spacing-m" />
            <UI.Chip label="mh=12" mh={12} selected testID="chip-spacing-mh" />
            <UI.Chip label="mv=8" mv={8} selected testID="chip-spacing-mv" />
            <UI.Chip label="p=4" p={4} selected testID="chip-spacing-p" />
            <UI.Chip label="ph=8" ph={8} selected testID="chip-spacing-ph" />
            <UI.Chip label="pv=4" pv={4} selected testID="chip-spacing-pv" />
          </View>
        </Layout.Card>
      </View>

      {/* 标签为 ReactNode */}
      <View style={styles.section}>
        <Layout.Card style={styles.card} p={16} backgroundColor={colors.surface}>
          <UI.Text variant="h3" color="text" style={{ marginBottom: 12 }}>标签 ReactNode</UI.Text>
          <UI.Text variant="caption" color="subtext" mb={8}>
            label 可为任意 ReactNode，适合复杂内容
          </UI.Text>
          <View style={styles.row}>
            <UI.Chip
              selected
              label={
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                  <UI.Icon name="flash" color="onSurface" />
                  <UI.Text variant="body2" color="onSurface" ml={6}>高级标签</UI.Text>
                </View>
              }
              testID="chip-label-reactnode"
            />
          </View>
        </Layout.Card>
      </View>
    </Layout.Page>
  );
};

export default ChipTestScreen;